﻿<style>
    .row-question {
        line-height: 24px;
    }

    .row-result {
        line-height: 133px;
    }

    .color-right {
        padding: 10px;
        color: white;
        background-color: #8dd0be;
    }

    .color-wrong {
        padding: 10px;
        color: white;
        background-color: #f78e57;
    }

    .color-explain {
        padding: 5px 0px 0px 0px;
        line-height: 1.5em;
        color: black;
        background-color: #FAEBB9;
        border: 1px solid #fbd011;
        border-radius: 5px;
    }

        .color-explain .content {
            margin: 10px 0px 0px 0px;
            padding: 0px 20px 10px 20px;
        }

    .orange {
        color: #ff6a00;
    }

    .xs-padding{
    padding-left:5px;
    padding-right:5px;
}
</style>

<br />
<div class="row" style="margin-left: 5%; margin-right: 5%">
    <div class="list-group-item" style="background-color: #dae6f0">
        <span class="orange" ng-if="question.mutiple">[多选题]</span>&nbsp;<span ng-if="isMock">{{curQuestionId}}.</span>{{question.question}}
        <div class="row" ng-if="question.image === 1">
            <img style="max-width:256px" ng-src="img/questionImgs/_{{question.id}}.gif" ng-click="showOriginalImg()" />
        </div>
    </div>
    <br />
    <ul class="list-group">
        <li class="list-group-item xs-padding" ng-repeat="opt in question.options">
            <div class="row" ng-click="selectOpetion($index)">
                <div class="col-xs-1 text-right row-question xs-padding" ng-switch="question.status[$index]">
                    <img ng-switch-when="1" class="isBackground" src="img/ico_selected.png" />
                    <img ng-switch-when="2" class="isBackground" src="img/ico_right.png" />
                    <img ng-switch-when="3" class="isBackground" src="img/ico_wrong.png" />
                    <img ng-switch-default class="isBackground" src="img/ico_notselected.png" />
                </div>
                <div class="col-xs-11 text-left row-question xs-padding">
                    {{opt}}
                </div>
            </div>
        </li>
    </ul>
    <div class="row" ng-show="(question.answered && !isMock)">
        <p class="color-right" ng-show="question.isCorrect">恭喜您，答对了!</p>
        <p class="color-wrong" ng-hide="question.isCorrect">答错了，正确答案：{{question.correctResult}}</p>
        <div class="row color-explain" ng-hide="question.isCorrect">
            <div class="row"><img src="img/explain.png" class="img-responsive"></div>
            <div class="row content">{{question.explain==undefined?"无":question.explain}}</div>
        </div>
    </div>
    <div class="row text-center" ng-if="question.mutiple" ng-hide="question.answered">
        <div class="col-xs-3"></div>
        <div class="col-xs-6">
            <a class="btn btn-warning" ng-click="answerChanged()">提交</a>
        </div>
        <div class="col-xs-3"></div>
    </div>
    <div ng-if="showMask" class="mask" ng-click="showOriginalImg()">
        <div class="text-center" style="padding-top:70px">
            <img ng-src="img/questionImgs/_{{question.id}}.gif" style="max-width:100%">
        </div>
    </div>
</div>